<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolro">
                    <em>10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em>123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em>35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em>123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show">
                    <!-- 折线图 -->
                </div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show">
                    <!-- 饼图 -->
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show">
            <!-- 柱状图 -->
        </div>
    </div>
    <script src="./js/http.js"></script>
    <script>
        $(function () {
            // 头部数据
            topData()
            //折线图
            line()
            //饼图
            bie()
            //柱状图
            bar()
        })
        //头部数据
        function topData() {
            myJsGet('/admin/data/info', function (resData) {
                $('.scolro em').html(resData.totalArticle);
                $('.scolor01 em').html(resData.dayArticle);
                $('.scolor02 em').html(resData.totalComment);
                $('.scolor03 em').html(resData.dayComment);
            })
        }

        function line() {
            //折线图数据
            myJsGet('/admin/data/article', function (resData) {
                //获取折线图数据
                let date = resData.date;
                //手动遍历
                /* let xAxisdate = [];
                let yAxisdate = [];
                date.forEach(itme => {
                    xAxisdate.push(itme.date);
                    yAxisdate.push(itme.count);
                }) */

                // map方法,内部遍历两次
                let xAxisdate = date.map(itme => itme.date);
                let yAxisdate = date.map(itme => itme.count);

                /* let newdate = date.map(itme => ({  //生成新数组,更改属性名和属性值
                    day: itme.date,
                    con: itme.count,
                }))
                console.log(newdate); */
                //配置折线图
                let charts = echarts.init(document.querySelector('#curve_show'))
                let option = {
                    title: {
                        text: '文章新增趋势',
                        left: 'center',
                        verticalAlign: 'bottom',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisdate,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxisdate,
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'red' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'blue' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }]
                }
                charts.setOption(option)
            })
        }
        //饼图
        function bie() {
            myJsGet('/admin/data/category', function (resData) {
                let date = resData.date;
                let cname = date.map(itme => itme.name);
                let newdate = date.map(itme => ({
                    name: itme.name,
                    value: itme.articles,
                }))
                let piecharts = echarts.init(document.querySelector('#pie_show'));
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        left: 10,
                        data: cname,
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['30%', '50%'],
                            data: newdate
                        }
                    ]
                };
                piecharts.setOption(option)
            })
        }
        //柱状图
        function bar() {
            myJsGet('/admin/data/visit', function (resData) {
                let data = resData.data;
                let xdata = [];
                let ydata = [];
                for (let k in data) {
                    if (data[k] !== 0) {
                        xdata.push(k);
                        ydata.push(data[k]);
                    }
                }
                //柱状图
                let charts = echarts.init(document.querySelector('#column_show'));
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xdata,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: ydata,
                        type: 'bar',
                        barWidth: '30%',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 1, color: '#188df0' }
                                ]
                            )
                        },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                };
                charts.setOption(option)
            })
        }
    </script>

</body>

</html>